<template>
  <div class="subCateWrap">
    <div>
      <ul class="subCate" v-if="dataToShow">
        <li class="banner"
            :style="`backgroundImage: url('${dataToShow.bannerUrl}')`"
        ></li>
        <li class="subCategories">
          <ul class="itemWrap">
            <li class="item" v-for="(item,index) in processedData" :key="index">
              <img :src="item.bannerUrl" alt="">
              <span class="name">{{item.name}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import BSCroll from 'better-scroll'
  
  export default {
    name:'index',
    props:["id"],
    data(){
      return{
        dataToShow: {},
      }
    },
    computed: {
      ...mapState({
        catelist: state => state.categoryList.catelist
      }),
      processedData(){
        if(this.dataToShow){
          return this.dataToShow.subCateList
        }else {
          return []
        }
      }
    },
    methods:{
      showContent(){
        this.dataToShow = this.catelist.find((item)=>{
          return item.id === this.id*1
        })
      }
    },
    mounted(){
      this.showContent()
      this.$nextTick(()=>{
        new BSCroll('.subCateWrap',{
          scrollY: true,
          click: true
        })
      })
    },
    watch:{
      catelist(newValue){
        if(!this.dataToShow){
          //this.dataToShow = newValue[0]
          //this.$router.push(`/category/subCategory?id=${newValue[0].id}`)
        }
      },
      id(){
        this.showContent()
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .subCateWrap
    overflow hidden
    width 588px
    height 1148px
    padding 30px 30px 30px 21px
    box-sizing border-box
    margin-top 50px
    .subCate
      width 528px
      height 1288px
      .banner
        height 192px
        box-sizing border-box
        margin-bottom 32px
        background no-repeat url("https://yanxuan.nosdn.127.net/4a2efe27bba0fa5a60750df399423d94.png?imageView&thumbnail=0x196&quality=75")
        background-size 100%
      .subCategories
        height 864px
        .itemWrap
          display flex
          flex-wrap wrap
          .item
            width 144px
            height 216px
            //background: #000
            margin-right 34px
            &:nth-child(3n+0)
              margin-right -10px
            img
              width 100%
              auto
              .name
                text-align: center

</style>
